<!--
 * Description: CBOM Compare Table 组件
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Chengming.Li
 * Date: 2020/12/18 11:26
-->

<template>
  <VirtualTable
    :cell-style="cellStyle"
    childrenAlisas="children"
    :headerCellStyle="headerCellStyle"
    :table="tableList"
  >
    <!-- 层级 -->
    <Cell align="left" fix="left" label="层级" prop="level" />
    <!-- Left -->
    <Cell label="Left">
      <!-- SAP料号 -->
      <Cell label="SAP料号" prop="left.partNumber" />
      <!-- SAP物料组 -->
      <Cell label="SAP物料组" prop="left.materialGroup" />
      <!-- SAP料件类型 -->
      <Cell label="SAP料件类型" prop="left.materialType" />
      <!-- SAP物料说明 -->
      <Cell label="SAP物料说明" prop="left.partDescription" />
      <!-- 替代料组 -->
      <Cell label="替代料组" prop="left.alternativeItemGroup" />
      <!-- 计算标识 -->
      <Cell label="计算标识" prop="left.calculateStatus" />
      <!-- CBOM版本 -->
      <Cell label="CBOM版本" prop="left.cbomVersion" />
      <!-- 总金额 -->
      <Cell label="总金额" prop="left.cost" />
      <!-- 料件单价 -->
      <Cell label="料件单价" prop="left.pirPrice" />
      <!-- 采购类型 -->
      <Cell label="采购类型" prop="left.procurementMethod" />
      <!-- 料件用量 -->
      <Cell label="料件用量" prop="left.ratio" />
      <!-- SAP采购员代码 -->
      <Cell label="SAP采购员代码" prop="left.sourcerCode" />
      <!-- 类别 -->
      <Cell label="采购类型" prop="left.tower" />
      <!-- Tracking SKU -->
      <Cell label="Tracking SKU" prop="left.trackingSku" />
      <!-- 替代料使用比例 -->
      <Cell label="替代料使用比例" prop="left.usageProbability" />
    </Cell>
    <!-- Right -->
    <Cell label="Right">
      <!-- SAP料号 -->
      <Cell label="SAP料号" prop="right.partNumber" />
      <!-- SAP物料组 -->
      <Cell label="SAP物料组" prop="right.materialGroup" />
      <!-- SAP料件类型 -->
      <Cell label="SAP料件类型" prop="right.materialType" />
      <!-- SAP物料说明 -->
      <Cell label="SAP物料说明" prop="right.partDescription" />
      <!-- 替代料组 -->
      <Cell label="替代料组" prop="right.alternativeItemGroup" />
      <!-- 计算标识 -->
      <Cell label="计算标识" prop="right.calculateStatus" />
      <!-- CBOM版本 -->
      <Cell label="CBOM版本" prop="right.cbomVersion" />
      <!-- 总金额 -->
      <Cell label="总金额" prop="right.cost" />
      <!-- 料件单价 -->
      <Cell label="料件单价" prop="right.pirPrice" />
      <!-- 采购类型 -->
      <Cell label="采购类型" prop="right.procurementMethod" />
      <!-- 料件用量 -->
      <Cell label="料件用量" prop="right.ratio" />
      <!-- SAP采购员代码 -->
      <Cell label="SAP采购员代码" prop="right.sourcerCode" />
      <!-- 类别 -->
      <Cell label="类别" prop="right.tower" />
      <!-- Tracking SKU -->
      <Cell label="Tracking SKU" prop="right.trackingSku" />
      <!-- 替代料使用比例 -->
      <Cell label="替代料使用比例" prop="right.usageProbability" />
    </Cell>
    <!-- 变化 -->
    <Cell fixed="right" label="变化情况" prop="isChange">
      <template slot-scope="scope">
        <span v-if="scope.row.isAdd">{{ scope.row.isAdd ? '新增' : '' }}</span>
        <span v-else>{{ scope.row.isDelete ? '删除' : '' }}</span>
      </template>
    </Cell>
  </VirtualTable>
</template>
<script>
import Cell from '@/widgets/VirtualTable/Cell'
import VirtualTable from '@/widgets/VirtualTable/Table'
export default {
  name: 'CompareTable',
  components: { VirtualTable, Cell },

  props: {
    queryType: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      isRequesting: false,
      tableList: [],
      leftList: [],
      rightList: [],
      tableListTemp: []
    }
  },

  methods: {
    headerCellStyle({ col, depth, td }) {
      if ((td.prop && td.prop.indexOf('left.') !== -1) || (col === 2 && depth === 1)) {
        return {
          backgroundColor: '#ffd966',
          color: ' #333333'
        }
      } else if ((td.prop && td.prop.indexOf('right.') !== -1) || (col === 3 && depth === 1)) {
        return {
          backgroundColor: '#2f75b5',
          color: '#ffffff'
        }
      }
    },

    startCompare(left, right) {
      this.leftList = left
      this.rightList = right
      const leftDiffList = this.getLeftDiff()
      const rightDiffList = this.getRightDiff()
      const sameList = this.getSameList()
      const tableListTemp = this.mergeList(sameList, leftDiffList, rightDiffList)
      if (this.queryType === '全局格式') {
        this.makeTree(tableListTemp)
      } else {
        this.tableList = tableListTemp
      }
    },
    // 列样式
    cellStyle({ colConfig, td }) {
      if (td.data.isAdd) {
        if (colConfig.prop.indexOf('right.') !== -1 || colConfig.prop === 'isChange') {
          return {
            backgroundColor: '#0fd59d'
          }
        }
      }
      if (td.data.isDelete) {
        if (
          (colConfig.prop.indexOf('left.') !== -1 && colConfig.prop.indexOf('left.level') === -1) ||
          colConfig.prop === 'isChange'
        ) {
          return {
            backgroundColor: '#d73a49',
            color: '#fff'
          }
        }
      }
    },
    /** 循环组装成树 */
    makeTree(list = []) {
      for (let i = 0, len = list.length; i < len; i++) {
        // 当前节点不存在parentSourceCode
        if (!list[i].parentSourceCode) {
          continue
        }
        this.findParent(list, list[i])
      }
      this.tableList = list.filter(item => !item.parentSourceCode)
    },

    findParent(list = [], currentNode) {
      /** 找到当前节点的父级节点 */
      const parentNodeIndex = list.findIndex(
        item => item.partNumber + '_' + item.sourcerCode === currentNode.parentSourceCode
      )
      const parentNode = list[parentNodeIndex]
      // 当前节点父节点存在
      if (parentNode) {
        // 证明之前已经有子节点追加进去了
        if (parentNode.children) {
          /** children 中是否已经存在当前节点 */
          const findNodeItem = parentNode.children.find(
            item =>
              item.partNumber + item.sourcerCode ===
              currentNode.partNumber + currentNode.sourcerCode
          )
          if (findNodeItem) return
          parentNode.children = [...parentNode.children, currentNode]
        } else {
          parentNode.children = [currentNode]
        }
        if (parentNode.parentSourceCode) {
          this.findParent((list = []), parentNode)
        }
      }
    },

    getLeftDiff() {
      // 左边相比较右边独有的
      const leftDiffList = this.leftList.filter(leftItem => {
        const result = this.rightList.findIndex(
          rightItem =>
            leftItem.partNumber === rightItem.partNumber &&
            leftItem.sourcerCode === rightItem.sourcerCode
        )
        return result === -1
      })

      return leftDiffList
    },

    getRightDiff() {
      // 右边相比较左边独有的
      const rightDiffList = this.rightList.filter(rightItem => {
        const result = this.leftList.findIndex(
          leftItem =>
            leftItem.partNumber === rightItem.partNumber &&
            leftItem.sourcerCode === rightItem.sourcerCode
        )
        return result === -1
      })

      return rightDiffList
    },

    getSameList() {
      // 共同有的
      const sameList = []
      this.rightList.forEach((rightItem, index) => {
        const result = this.leftList.findIndex(
          leftItem =>
            leftItem.partNumber === rightItem.partNumber &&
            leftItem.sourcerCode === rightItem.sourcerCode
        )
        if (result > -1) {
          sameList.push({
            left: this.leftList[result],
            right: rightItem,
            id: rightItem.id,
            level: rightItem.level,
            partNumber: rightItem.partNumber,
            sourcerCode: rightItem.sourcerCode,
            parentSourceCode: rightItem.parentSourceCode,
            isAdd: false,
            isDelete: false
          })
        }
      })
      return sameList
    },

    mergeList(sameList = [], leftDiffList = [], rightDiffList = []) {
      // 左边特有的
      leftDiffList.forEach((item, index) => {
        sameList.push({
          left: item,
          right: {
            id: item.id,
            level: item.level
            // partNumber: item.partNumber,
            // sourcerCode: item.sourcerCode,
            // parentSourceCode: item.parentSourceCode
          },
          id: item.id,
          level: item.level,
          partNumber: item.partNumber,
          sourcerCode: item.sourcerCode,
          parentSourceCode: item.parentSourceCode,
          isAdd: false,
          isDelete: true
        })
      })

      // 右边特有的
      rightDiffList.forEach((item, index) => {
        sameList.push({
          left: {
            id: item.id,
            level: item.level
            // partNumber: item.partNumber,
            // sourcerCode: item.sourcerCode,
            // parentSourceCode: item.parentSourceCode
          },
          right: item,
          id: item.id,
          level: item.level,
          partNumber: item.partNumber,
          sourcerCode: item.sourcerCode,
          parentSourceCode: item.parentSourceCode,
          isAdd: true,
          isDelete: false
        })
      })

      return sameList
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-table__fixed {
  height: auto !important; // 此处的important表示优先于element.style
  bottom: 17px; // 改为自动高度后，设置与父容器的底部距离，则高度会动态改变
}
/deep/ .el-table__fixed-right {
  height: auto !important; // 此处的important表示优先于element.style
  bottom: 17px; // 改为自动高度后，设置与父容器的底部距离，则高度会动态改变
}
/deep/ .el-page-header__content {
  font-size: 16px;
}

/deep/ .no-border {
  border-right: 1px solid transparent !important;
}
</style>
